<template>
  <div>
    <el-form inline label-position="right" label-width="220px" class="mt80">
      <el-row class="mt20">
        <el-col :span="12" style="height: 240px" v-for="(item, index) in picData" :key="index">
          <el-form-item :label="item.label">
            <my-fyUpload :data="item" @reUrlData="getImgUrl(arguments, index)"></my-fyUpload>
          </el-form-item>
          <img :src="item.url" :ref="'img_' + index" style="width: 148px; height: 148px" :fit="fit" @click="handlePreview(item.url)" />
        </el-col>
      </el-row>
    </el-form>
    <!-- 预览 -->
    <el-dialog :visible.sync="dialogVisible" width="80vw" :modal-append-to-body="true" append-to-body @close="closeFnc">
      <img height="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import fyUpload from '@/components/upload/fy-upload.vue';
export default {
  data() {
    return {
      flag: false,
      picData: [
        { tip: '-1.png', label: '附页3-1：', limit: 1, name: 'fy1' },
        { tip: '-2.png', label: '附页3-2：', limit: 1, name: 'fy1' },
        { tip: '-3.png', label: '附页3-3：', limit: 1, name: 'fy1' },
        { tip: '-logo.png', label: '附页3-logo：', limit: 1, name: 'fy1' },
        { tip: '-ico.jpg', label: '附页3-ico：', limit: 1, name: 'fy1' },
        { tip: '.jpg', label: '附页4：', limit: 1, name: 'fy2' },
        { tip: '-11-1.jpg', label: '附页11：', limit: 1, name: 'fy11' },
        { tip: '-11-2.jpg', label: '附页11：', limit: 1, name: 'fy11' },
        { tip: '-11-3.png', label: '附页11：', limit: 1, name: 'fy11' },
      ],
      fit: 'contain',
      dialogVisible: false,
      dialogImageUrl: '',
    };
  },

  components: {
    'my-fyUpload': fyUpload,
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.picData.map(item => {
        item.game_id = this.$route.query.id;
        item.tip = this.$route.query.name + item.tip;
        item.interface_name = this.$route.query.name;
      });
      this.picData.forEach((item, index) => {
        switch (index) {
          case 0:
          case 1:
          case 2:
            this.$set(item, 'url', `http://static.tonnn.com/promotion/fy/static/images/fy1/${item.interface_name}/${item.interface_name}-${index}.png`);
            break;
          case 3:
            this.$set(item, 'url', `http://static.tonnn.com/promotion/fy/static/images/fy1/${item.interface_name}/${item.interface_name}-logo.png`);
            break;
          case 4:
            item.url = `http://static.tonnn.com/promotion/fy/static/images/fy1/${item.interface_name}-ico.jpg`;
            break;
          case 5:
            item.url = `http://static.tonnn.com/promotion/fy/static/images/fy2/${item.interface_name}.jpg`;
            break;
          case 6:
          case 7:
            item.url = `http://static.tonnn.com/promotion/fy/static/images/fy11/${item.interface_name}-11-${index - 5}.jpg`;
            break;
          case 8:
            item.url = `http://static.tonnn.com/promotion/fy/static/images/fy11/${item.interface_name}-11-${index - 5}.png`;
            break;
        }
      });
    },
    getImgUrl(data, index) {
      this.$refs['img_' + index][0].src = `${data[0]}?time=${new Date()}`;
    },
    // 提交
    submit() {
      if (this.checkInputText()) return;
    },
    // 检查
    checkInputText() {
      return false;
    },
    // 预览
    handlePreview(url) {
      this.dialogVisible = true;
      this.dialogImageUrl = url;
    },
    // 关闭预览
    closeFnc() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang='stylus' scoped>
body {
}

img {
  cursor: pointer;
}
</style>
